﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>惊喜页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        #surprise-btn {
            padding: 15px 30px;
            font-size: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

            #surprise-btn:hover {
                background-color: #45a049;
                transform: scale(1.1);
            }

        .floating-text {
            position: absolute;
            font-size: 36px; /* 更大的字号 */
            user-select: none;
            pointer-events: none;
            font-weight: bold; /* 加粗文字 */
        }

        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <button id="surprise-btn">点我有惊喜</button>

    <script>
        const btn = document.getElementById('surprise-btn');

        btn.addEventListener('click', () => {
            btn.style.display = 'none';
            createFloatingTexts();
            createFireworks();
        });

        function createFloatingTexts() {
            for (let i = 0; i < 20; i++) {
                const text = document.createElement('div');
                text.className = 'floating-text';
                text.textContent = '王铖昊大帅逼';
                text.style.left = Math.random() * window.innerWidth + 'px';
                text.style.top = Math.random() * window.innerHeight + 'px';
                // 随机颜色
                text.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                document.body.appendChild(text);

                animateText(text);
            }
        }

        function animateText(element) {
            let x = Math.random() * window.innerWidth;
            let y = Math.random() * window.innerHeight;
            let speedX = (Math.random() - 0.5) * 5;
            let speedY = (Math.random() - 0.5) * 5;

            function update() {
                x += speedX;
                y += speedY;

                if (x < 0 || x > window.innerWidth) speedX *= -1;
                if (y < 0 || y > window.innerHeight) speedY *= -1;

                element.style.left = x + 'px';
                element.style.top = y + 'px';

                requestAnimationFrame(update);
            }
            update();
        }

        function createFireworks() {
            setInterval(() => {
                const firework = document.createElement('div');
                firework.className = 'firework';
                firework.style.left = Math.random() * window.innerWidth + 'px';
                firework.style.top = Math.random() * window.innerHeight + 'px';
                firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                document.body.appendChild(firework);

                let size = 0;
                let opacity = 1;

                function animate() {
                    size += 2;
                    opacity -= 0.02;
                    firework.style.transform = `scale(${size})`;
                    firework.style.opacity = opacity;

                    if (opacity > 0) {
                        requestAnimationFrame(animate);
                    } else {
                        firework.remove();
                    }
                }
                animate();
            }, 300);
        }
    </script>
</body>
</html>